<template>
  <div class="login-page">
    <div class="decoration heart-1"><i class="fas fa-heart"></i></div>
    <div class="decoration heart-2"><i class="fas fa-heart"></i></div>
    <div class="decoration heart-3"><i class="fas fa-heart"></i></div>

    <div class="container">
      <!-- Logo部分 -->
      <div class="logo-section">
        <div class="logo-container">
          <div class="logo-icon">
            <!-- <i class="fas fa-heart"></i> -->
          </div>
        </div>
        <h1 class="brand-name">DOREMI</h1>
        <p class="tagline">{{ tagline }}</p>
      </div>

      <!-- 消息提示 -->
      <div v-if="message.text" :class="['message', message.type]">
        {{ message.text }}
      </div>

      <!-- 欢迎部分 -->
      <div class="welcome-section">
        <p class="welcome-text">{{ welcomeText }}</p>

        <!-- 角色选择 -->
        <div class="role-selection">
          <button
            class="role-btn"
            :class="{ active: loginType === 'employee' }"
            @click="changeRole('employee')"
          >
            我是员工
          </button>
          <button
            class="role-btn"
            :class="{ active: loginType === 'admin' }"
            @click="changeRole('admin')"
          >
            我是管理者
          </button>
        </div>
      </div>

      <!-- 登录方式切换 -->
      <!-- <div class="login-method-tabs">
        <button
          class="method-tab"
          :class="{ active: loginMethod === 'password' }"
          @click="loginMethod = 'password'"
        >
          密码登录
        </button>
        <button
          class="method-tab"
          :class="{ active: loginMethod === 'sms' }"
          @click="loginMethod = 'sms'"
        >
          验证码登录
        </button>
      </div> -->

      <!-- 登录表单 -->
      <div class="login-form">
        <div class="form-group">
          <label for="username">{{ accountLabel }}</label>
          <input
            type="text"
            id="username"
            :placeholder="accountPlaceholder"
            v-model="username"
            @keyup.enter="handleLogin"
          />
        </div>

        <!-- 密码登录 -->
        <div class="form-group" v-if="loginMethod === 'password'">
          <label for="password">登录密码</label>
          <div class="password-input-wrapper">
            <input
              :type="showPassword ? 'text' : 'password'"
              id="password"
              placeholder="请输入密码"
              v-model="password"
              @keyup.enter="handleLogin"
            />
            <span class="password-toggle" @click="showPassword = !showPassword">
              <i :class="showPassword ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>
            </span>
          </div>
        </div>

        <!-- 短信登录 -->
        <div class="form-group" v-if="loginMethod === 'sms'">
          <label for="smsCode">验证码</label>
          <div class="sms-input-wrapper">
            <input
              type="text"
              id="smsCode"
              placeholder="请输入验证码"
              v-model="smsCode"
              @keyup.enter="handleLogin"
            />
            <button
              class="sms-btn"
              @click="sendSmsCode"
              :disabled="countdown > 0 || loading"
            >
              {{ countdown > 0 ? `${countdown}秒后重发` : "获取验证码" }}
            </button>
          </div>
        </div>

        <!-- 记住密码 - 仅在密码登录时显示 -->
        <div class="remember-me" v-if="loginMethod === 'password'">
          <input
            type="checkbox"
            id="remember-password"
            v-model="rememberPassword"
          />
          <label for="remember-password">记住密码</label>
        </div>

        <button class="login-btn" @click="handleLogin" :disabled="loading">
          {{ loading ? "登录中..." : loginButtonText }}
        </button>
      </div>

      <!-- 功能区域 - 员工端 -->
      <div class="features features-employee" v-if="loginType === 'employee'">
        <div class="feature">
          <i class="fas fa-shield-alt"></i>
          <span>安全私密</span>
        </div>
        <div class="feature">
          <i class="fas fa-comments"></i>
          <span>专业支持</span>
        </div>
        <div class="feature">
          <i class="fas fa-chart-line"></i>
          <span>成长追踪</span>
        </div>
        <div class="feature">
          <i class="fas fa-hands-helping"></i>
          <span>专属关怀</span>
        </div>
      </div>

      <!-- 功能区域 - 管理端 -->
      <div class="features features-manager" v-if="loginType === 'admin'">
        <h2>核心管理功能</h2>
        <div class="features-grid">
          <div class="feature">
            <i class="fas fa-chart-pie"></i>
            <p>团队心理健康概览</p>
          </div>
          <div class="feature">
            <i class="fas fa-exclamation-triangle"></i>
            <p>风险员工预警</p>
          </div>
          <div class="feature">
            <i class="fas fa-hands-helping"></i>
            <p>风险干预指南</p>
          </div>
          <div class="feature">
            <i class="fas fa-file-alt"></i>
            <p>数据分析报告</p>
          </div>
        </div>
      </div>

      <!-- 页脚 -->
      <footer>
        <p>{{ footerText }}</p>
      </footer>
    </div>
  </div>
</template>

<script>
import { login, sendSmsCode } from "../../api/index";

export default {
  name: "LoginPage",
  data() {
    return {
      loginType: "employee", // admin, employee
      loginMethod: "password", // password, sms
      username: "",
      password: "",
      smsCode: "",
      showPassword: false,
      rememberPassword: false,
      countdown: 0,
      loading: false,
      message: {
        text: "",
        type: "", // success, error
      },
    };
  },
  computed: {
    // 标语
    tagline() {
      return this.loginType === "employee"
        ? "您的专属职场心灵伙伴"
        : "您的团队心理健康战略伙伴";
    },
    // 欢迎文本
    welcomeText() {
      return this.loginType === "employee"
        ? "欢迎回来，今天也请好好关照自己"
        : "欢迎回来，与您共同关注组织的情绪健康";
    },
    // 账号标签
    accountLabel() {
      return this.loginType === "employee" ? "员工账号" : "管理员账号";
    },
    // 账号输入框占位符
    accountPlaceholder() {
      return this.loginType === "employee"
        ? "请输入您的员工账号"
        : "请输入您的管理员账号";
    },
    // 登录按钮文本
    loginButtonText() {
      return this.loginType === "employee"
        ? "进入DOREMI专属空间"
        : "进入管理平台";
    },
    // 页脚文本
    footerText() {
      return this.loginType === "employee"
        ? "您的心理健康，我们用心守护"
        : "您的团队健康，我们用心守护";
    },
  },
  methods: {
    // 切换角色
    changeRole(role) {
      this.loginType = role;
      // 清空表单
      this.username = "";
      this.password = "";
      this.smsCode = "";
      this.message.text = "";
    },

    // 显示消息
    showMessage(text, type = "error") {
      this.message = { text, type };
      // 3秒后自动清除消息
      setTimeout(() => {
        this.message.text = "";
      }, 3000);
    },

    // 发送短信验证码
    async sendSmsCode() {
      if (this.countdown > 0 || this.loading) return;

      if (!this.username) {
        this.showMessage("请输入手机号");
        return;
      }

      this.loading = true;
      try {
        let data = {
          mobile: this.username,
        };
        await sendSmsCode(data);
        this.showMessage("验证码发送成功", "success");

        // 开始倒计时
        this.countdown = 60;
        const timer = setInterval(() => {
          this.countdown--;
          if (this.countdown <= 0) {
            clearInterval(timer);
          }
        }, 1000);
      } catch (error) {
        this.showMessage("验证码发送失败，请重试");
      } finally {
        this.loading = false;
      }
    },

    // 处理登录
    async handleLogin() {
      // 表单验证
      if (!this.username) {
        this.showMessage(
          this.loginMethod === "password" ? "请输入用户名" : "请输入手机号"
        );
        return;
      }

      if (this.loginMethod === "password" && !this.password) {
        this.showMessage("请输入密码");
        return;
      }

      if (this.loginMethod === "sms" && !this.smsCode) {
        this.showMessage("请输入验证码");
        return;
      }

      this.loading = true;
      this.message.text = ""; // 清除之前的消息

      try {
        let data = {
          username: this.username,
          password: this.password,
          loginType: this.loginMethod === "password" ? 1 : 2,
        };

        // 如果是短信登录，添加短信验证码参数
        if (this.loginMethod === "sms") {
          data.mobile = this.username;
          data.smsCode = this.smsCode;
        }

        const res = await login(data);

        if (res.code === 200) {
          localStorage.setItem("userId", res.data.id);
          localStorage.setItem("unitId", res.data.unitId);
          this.showMessage("登录成功", "success");

          // 延迟跳转，让用户看到成功消息
          setTimeout(() => {
            // 根据登录类型跳转到不同页面
            if (this.loginType === "admin") {
              this.$router.push({ name: "管理者-首页1" });
            } else {
              this.$router.push({ name: "员工端-首页2" });
            }
          }, 1000);
        } else {
          this.showMessage(res.message || "登录失败，请检查用户名和密码");
        }
      } catch (error) {
        console.error("Login error:", error);
        this.showMessage("登录失败，请检查网络连接或联系管理员");
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>

<style scoped>
.login-page {
  background: linear-gradient(135deg, #eef7fe 0%, #becdee 100%);
  color: #4a6b8a;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 20px;
  max-width: 450px;
  margin: 0 auto;
}

.container {
  max-width: 400px;
  margin: 0 auto;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.logo-section {
  text-align: center;
}

.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
}

.logo-icon {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(74, 107, 138, 0.15);
  background-image: url("https://lesson.iapeap.com/2.png");
  background-size: 100% 100%;
}

.logo-icon i {
  font-size: 50px;
  color: #5a7db8;
}

.brand-name {
  font-size: 32px;
  font-weight: 700;
  color: #4a6b8a;
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.tagline {
  font-size: 16px;
  color: #5a7db8;
  font-weight: 500;
}

/* 消息提示样式 */
.message {
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
}

.message.success {
  background-color: rgba(76, 175, 80, 0.1);
  color: #2e7d32;
  border: 1px solid rgba(76, 175, 80, 0.2);
}

.message.error {
  background-color: rgba(244, 67, 54, 0.1);
  color: #c62828;
  border: 1px solid rgba(244, 67, 54, 0.2);
}

.welcome-section {
  text-align: center;
}

.welcome-text {
  font-size: 20px;
  color: #4a6b8a;
  margin-bottom: 20px;
  font-weight: 500;
  line-height: 1.5;
}

.role-selection {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.role-btn {
  flex: 1;
  padding: 12px;
  border: 2px solid #5a7db8;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.5);
  color: #4a6b8a;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
}

.role-btn.active {
  background: #5a7db8;
  color: white;
}

/* 登录方式切换 */
.login-method-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.method-tab {
  flex: 1;
  padding: 10px;
  border: 1px solid #b6d8f2;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.5);
  color: #4a6b8a;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.method-tab.active {
  background: #5a7db8;
  color: white;
  border-color: #5a7db8;
}

.login-form {
  background: rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  padding: 25px;
  box-shadow: 0 8px 20px rgba(74, 107, 138, 0.15);
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #4a6b8a;
  font-size: 14px;
  font-weight: 500;
}

.form-group input {
  width: 90%;
  padding: 14px;
  border: 1px solid #b6d8f2;
  border-radius: 10px;
  font-size: 15px;
  background: white;
  color: #4a6b8a;
  transition: all 0.3s;
}

.form-group input:focus {
  border-color: #5a7db8;
  outline: none;
  box-shadow: 0 0 0 2px rgba(90, 125, 184, 0.2);
}

/* 密码输入框包装 */
.password-input-wrapper {
  position: relative;
}

.password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #5a7db8;
  cursor: pointer;
}

/* 短信输入框包装 */
.sms-input-wrapper {
  display: flex;
  gap: 10px;
}

.sms-input-wrapper input {
  flex: 1;
}

.sms-btn {
  padding: 0 15px;
  background: #5a7db8;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.3s;
}

.sms-btn:disabled {
  background: #b6d8f2;
  cursor: not-allowed;
}

.remember-me {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
}

.remember-me input {
  margin-right: 8px;
  width: auto;
}

.remember-me label {
  color: #4a6b8a;
  font-size: 14px;
  margin-bottom: 0;
}

.login-btn {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #5a7db8 0%, #4a6b8a 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 5px 15px rgba(90, 125, 184, 0.4);
}

.login-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 7px 18px rgba(90, 125, 184, 0.5);
}

.login-btn:active:not(:disabled) {
  transform: translateY(0);
}

.login-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

/* 员工端功能样式 */
.features-employee {
  display: flex;
  justify-content: space-around;
  margin-top: 25px;
}

.features-employee .feature {
  text-align: center;
  font-size: 13px;
  color: #4a6b8a;
}

.features-employee .feature i {
  display: block;
  font-size: 20px;
  margin-bottom: 5px;
  color: #5a7db8;
}

/* 管理端功能样式 */
.features-manager {
  margin: 30px 0;
}

.features-manager h2 {
  text-align: center;
  font-size: 20px;
  color: #4a6b8a;
  margin-bottom: 20px;
}

.features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.features-manager .feature {
  background: rgba(255, 255, 255, 0.7);
  border-radius: 12px;
  padding: 15px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.features-manager .feature i {
  font-size: 24px;
  color: #5a7db8;
  margin-bottom: 10px;
}

.features-manager .feature p {
  font-size: 14px;
  color: #546e7a;
}

footer {
  text-align: center;
  margin-top: 20px;
  color: #5a6b8a;
  font-size: 13px;
}

.decoration {
  position: absolute;
  z-index: 0;
}

.decoration.heart-1 {
  top: 10%;
  left: 10%;
  font-size: 24px;
  color: rgba(90, 125, 184, 0.3);
  animation: float 6s ease-in-out infinite;
}

.decoration.heart-2 {
  bottom: 15%;
  right: 10%;
  font-size: 20px;
  color: rgba(90, 125, 184, 0.3);
  animation: float 5s ease-in-out infinite 1s;
}

.decoration.heart-3 {
  top: 30%;
  right: 15%;
  font-size: 16px;
  color: rgba(90, 125, 184, 0.3);
  animation: float 7s ease-in-out infinite 0.5s;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@media (max-width: 480px) {
  .role-selection {
  }

  .login-method-tabs {
    flex-direction: column;
  }

  .brand-name {
    font-size: 28px;
  }

  .welcome-text {
    font-size: 18px;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .sms-input-wrapper {
    flex-direction: column;
  }

  .sms-btn {
    padding: 10px;
  }
}
</style>
